import {
    Button,
    Input,
    Form,
    Popup,
    Area,
    Switch,
    Toast,
    NavBar,
} from "react-vant";

import { areaList } from "@vant/area-data";

import { useState, useEffect } from "react";

import axios from "axios";

import { useNavigate, useParams } from "react-router-dom";

function Editaddress() {
    let navigate = useNavigate();
    let [addressData, setAddressData] = useState({});
    let [didata, setDidata] = useState([]);
    //截取路由参数
    let params = useParams();
    const [visible, setVisible] = useState(false);

    const [form] = Form.useForm();

    //编辑地址
    //const addNewAddress = (values) => {
    //参数
    /**
     *  appkey: 你的appkey,
        tokenString: token字符串,
        name: 姓名,
        tel: 电话,
        province: 省份,
        city: 市,
        county: 区县,
        addressDetail: 详细地址,
        areaCode: 地区编号,
        postalCode: 邮政编码,
        isDefault: 默认地址
     */

    // let areaText = values.area.split(/\//);

    // let data = {
    // name: values.name,
    // tel: values.tel,
    // province: areaText[0],
    // city: areaText[1],
    // county: areaText[2],
    // addressDetail: values.addressDetail,
    // areaCode: "",
    // postalCode: values.postalCode,
    // isDefault: Number(
    // values.isDefault === undefined

    // : values.isDefault
    // ),
    // };

    // axios({
    // method: "post",
    // url: "/editAddress",
    // data,
    // })
    // .then((res) => {
    // if (res.data.code === 700) {
    // return navigate("/login");
    // }
    // Toast({
    // message: res.data.msg,
    // });
    // })
    // .catch((err) => {});
    // };

    let onFinish = (values) => {
        let areaData = [];
        if (values.area) {
            areaData = values.area.split("/");
        }
        let data = {
            aid: addressData.aid,
            name:
                values.name != undefined
                    ? values.name
                    : addressData.name,
            tel:
                values.tel != undefined
                    ? values.tel
                    : addressData.tel,
            province:
                areaData[0] != undefined
                    ? areaData[0]
                    : addressData.province,
            city:
                areaData[1] != undefined
                    ? areaData[1]
                    : addressData.city,
            county:
                areaData[2] != undefined
                    ? areaData[2]
                    : addressData.county,
            addressDetail:
                values.addressDetail != undefined
                    ? values.addressDetail
                    : addressData.addressDetail,
            areaCode: "",
            postalCode:
                values.postalCode != undefined
                    ? values.postalCode
                    : addressData.postalCode,
            isDefault: Number(
                values.isDefault == undefined
                    ? false
                    : values.isDefault
            ),
        };
        axios({
            method: "post",
            url: "/editAddress",
            data,
        })
            .then((res) => {
                console.log("res=>", res);
                if (res.data.code === 30000) {
                    return navigate(-1);
                }
            })
            .catch((err) => {
                console.log("err=>", err);
            });
    };

    let getaid = (aid) => {
        axios({
            method: "get",
            url: "/findAddressByAid",
            params: {
                aid,
            },
        })
            .then((res) => {
                console.log(res);
                setDidata(res.data.result);
            })
            .catch((err) => {
                console.log(err);
            });
    };
    //确定选择地区
    let selectArea = (value, option) => {
        //
        //

        if (option.length < 3) {
            Toast({
                message: "请选择省市区",
            });
            return;
        }

        let area = [];

        option.forEach((item) => {
            area.push(item.text);
        });

        //修改表单指定文本域的内容
        form.setFieldValue("area", area.join("/"));

        setVisible(false);
    };

    useEffect(() => {
        getaid(params.aid);
        setAddressData({ ...addressData });
    }, []);
    return (
        <div className="address">
            <NavBar
                title="修改地址"
                leftText="返回"
                rightText=""
                onClickLeft={() => navigate(-1)}
            />
            <div>
                {didata.map((item, index) => {
                    return (
                        <div key={index}>
                            <Form
                                form={form}
                                onFinish={onFinish}
                                footer={
                                    <div
                                        style={{
                                            margin: "16px 16px 0",
                                        }}
                                    >
                                        <Button
                                            round
                                            nativeType="submit"
                                            type="primary"
                                            block
                                        >
                                            保存
                                        </Button>
                                    </div>
                                }
                            >
                                <Form.Item
                                    rules={[
                                        {
                                            required: true,
                                            message: "",
                                        },
                                    ]}
                                    name="name"
                                    label="姓名"
                                >
                                    <Input
                                        placeholder={
                                            item.name
                                        }
                                    />{" "}
                                </Form.Item>{" "}
                                <Form.Item
                                    rules={[
                                        {
                                            required: true,
                                            message:
                                                "请填写手机号",
                                        },
                                        {
                                            pattern:
                                                /^1[3-9]\d{9}$/,
                                            message:
                                                "手机号格式错误",
                                        },
                                    ]}
                                    name="tel"
                                    label="手机号"
                                >
                                    <Input
                                        placeholder={
                                            item.tel
                                        }
                                    />
                                </Form.Item>
                                <Form.Item
                                    isLink
                                    name="area"
                                    rules={[
                                        {
                                            required: true,
                                            message: "地区",
                                        },
                                    ]}
                                    label="地区"
                                    onClick={() =>
                                        setVisible(true)
                                    }
                                >
                                    <Input
                                        placeholder={
                                            item.province +
                                            item.city +
                                            item.county
                                        }
                                        readOnly
                                    />
                                </Form.Item>
                                <Form.Item
                                    rules={[
                                        {
                                            required: true,
                                            message:
                                                "详细地址",
                                        },
                                    ]}
                                    name="addressDetail"
                                    label="详细地址"
                                >
                                    <Input
                                        placeholder={
                                            item.addressDetail
                                        }
                                    />
                                </Form.Item>
                                <Form.Item
                                    rules={[
                                        {
                                            pattern:
                                                /^\d{6}$/,
                                            message:
                                                "邮政编码格式错误",
                                        },
                                    ]}
                                    name="postalCode"
                                    label="邮政编码"
                                >
                                    <Input
                                        placeholder={
                                            item.postalCode
                                        }
                                    />
                                </Form.Item>
                                <Form.Item
                                    name="isDefault"
                                    label="设为默认地址"
                                    valuePropName="checked"
                                    controlAlign="right"
                                >
                                    <Switch size={20} />
                                </Form.Item>
                            </Form>
                        </div>
                    );
                })}
            </div>
            <Popup
                visible={visible}
                onClose={() => setVisible(false)}
                position="bottom"
            >
                <div
                    style={{
                        padding: "10px 20px",
                    }}
                >
                    <Area
                        areaList={areaList}
                        onConfirm={(value, option) => {
                            selectArea(value, option);
                        }}
                        onCancel={() => {
                            setVisible(false);
                        }}
                    />
                </div>
            </Popup>
        </div>
    );
}

export default Editaddress;
